<html>

<head>
    <title>api</title>
    <meta charset="utf-8" />
    <script src="js/jquery.js"></script>
    <script src="js/script.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.dragsort.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">


</head>

<body>
    <div class="col-xs-3 panel left">
        <h1 class=" page-header">
            <div class="input-group ">
                <select class="form-control ProjectList"  > 
                </select>
                <span class="input-group-btn">
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                        <i class="glyphicon glyphicon-menu-hamburger"></i>
                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a class="NewProject" href="#">新建项目</a></li>
                        <li><a class="DelProject" href="#">删除当前项目</a></li>
                        <li><a class="ClrProject" href="#">清空当前项目</a></li>
                        <li><a class="RenProject" href="#">修改当前项目</a></li>
                        <li class="divider"></li> 
                        <li><a class="ImportJson" href="#">导入json</a></li>
                        <li><a class="ExportJson" href="#">导出json</a></li>
                        <li class="divider"></li> 
                        <li><a class="ExportDoc" href="#">导出doc</a></li> 
                        <li><a class="abc" href="#">浏览模式</a></li> 
                    </ul>
                </span>
            </div>
        </h1>
        <ul class="nav in" id="Lists">
            <li>
                <a href="">aaa</a>
            </li>
            <li>
                <a href="">aaa</a>
            </li>
            <li>
                <a href="">aaa</a>
            </li>
        </ul>
    </div>
    <div class="col-xs-9 panel right" >
        <span class="ttt"></span class="ttt">
        <form action="" id="_FORM">
            <h1 class="page-header pos">
                <input style="width:100%" placeholder="空白表单" name="Name" required>
                <div class="pos-right"> 
                    <button class="btn btn-info  btn-sm New"    type="submit"  >新建</button>
                    <button class="btn btn-primary  btn-sm Clone"   type="submit"  >拷贝</button>
                    <button class="btn btn-success  btn-sm Save"   type="submit"  >保存</button>
                </div>
            </h1>
            <div class="panel " > 
                <div class="input-group ">
                    <span class="input-group-btn">  
                        <button class="btn btn-default Head  " >
                        http://
                        </button>
                    </span>
                    <input class="form-control" placeholder="" name="Url" required>
                    <span class="input-group-btn">  
                        <select class="btn  btn-default" name="Method"  style="height:34px" >
                            <option>GET</option>
                            <option>POST</option>
                            <option>DELETE</option>
                            <option>PUT</option>
                            <option>OPTION</option>
                        </select> 
                        <button class="btn btn-default Send" type="submit" >
                        提交
                        </button>
                    </span>
                </div> 
            </div>

            <div class="gridly">
                <div class="panel brick  panel-default " data-key='h'>
                    <ul class="nav nav-pills">
                        <li class="active"><a href="#EXRequest" data-toggle="tab">请求头</a></li>
                        <li><a href="#EXResponse" data-toggle="tab">响应头</a></li>
                        <li><a href="#EXPreview" data-toggle="tab">内容</a></li>
                        <li><a href="#EXScript" data-toggle="tab">脚本</a></li> 
                        <li class="pull-right Status" style="padding:12px" ></li> 
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade panel-body in active" id="EXRequest">
                            <table class=" table Headers"   >
                                <!--<tr>
                                    <td><input class="form-control" type="text" placeholder="key"></td>
                                    <td><input class="form-control" type="text" placeholder="value"></td>
                                    <td style="width:1">
                                        <input class="btn " type="checkbox">
                                        <button class="btn btn-default glyphicon glyphicon-resize-vertical" type="button" data="TabMove"></button>
                                        <button class="btn btn-default glyphicon glyphicon-remove" type="button" data="TabRemove"></button>
                                    </td>
                                </tr>-->
                            </table>
                            <button class="btn btn-xs btn-default pull-right glyphicon glyphicon-plus NewHeaders" ></button>
                        </div>
                        <div class="tab-pane fade panel-body" id="EXResponse">
                            <pre  ></pre>
                        </div>
                        <div class="tab-pane fade panel-body" id="EXPreview"> 
                            <pre></pre>
                        </div> 
                        <div class="tab-pane fade panel-body" id="EXScript"> 
                            <textarea name="Example" class="form-control"></textarea>
                        </div> 
                    </div>
                </div>

                <div class="panel brick  panel-default " data-key='p'>
                    <div class="panel-heading">请求参数 </div>
                    <table class=" table Params" >
                        <!--<tr>
                                <td><input  class="form-control" type="text" placeholder="key"></td>
                                <td><input  class="form-control" type="text" placeholder="value"></td>
                                <td><select class="form-control"><option></option></select></td>
                                <td><input  class="form-control" type="text" placeholder="mark"></td>
                                <td style="width:1">
                                    <input class="btn " type="checkbox"> 
                                    <button class="btn btn-default glyphicon glyphicon-resize-vertical" type="button" data="TabMove" ></button> 
                                    <button class="btn btn-default glyphicon glyphicon-remove" type="button" data="TabRemove" ></button>
                                </td>
                            </tr>-->
                    </table>
                    <div class="panel-body">
                        <button class="btn btn-xs btn-default pull-right glyphicon glyphicon-plus NewParams"  ></button>
                    </div>
                </div>

                <div class="panel brick  panel-default " data-key='r'>
                    <div class="panel-heading">响应数据 </div>
                    <table class=" table Response"  >
                        <!--<tr>
                                <td><input  class="form-control" type="text" placeholder="key"></td>
                                <td><input  class="form-control" type="text" placeholder="value"></td> 
                                <td><input  class="form-control" type="text" placeholder="mark"></td>
                                <td style="width:1">
                                <input class="btn " type="checkbox"> 
                                <button class="btn btn-default glyphicon glyphicon-resize-vertical" type="button" data="TabMove" ></button> 
                                <button class="btn btn-default glyphicon glyphicon-remove" type="button" data="TabRemove" ></button>
                                </td>
                            </tr>-->
                    </table>
                    <div class="panel-body">
                        <button class="btn btn-xs btn-default pull-right glyphicon glyphicon-plus NewResponse" ></button>
                    </div>
                </div>
            </div>


            <!--
            <div class="panel  panel-default">
                <div class="panel-heading">请求头 <button class="btn btn-xs btn-default pull-right glyphicon glyphicon-plus" data='NewHeaders'></button></div>
                <table class=" table" data="Headers">
                    <tr>
                        <td><input  class="form-control" type="text" placeholder="key"></td>
                        <td><input  class="form-control" type="text" placeholder="value"></td> 
                        <td style="width:1">
                            <input class="btn " type="checkbox"> 
                            <button class="btn btn-default glyphicon glyphicon-resize-vertical" type="button" data="TabMove" ></button> 
                            <button class="btn btn-default glyphicon glyphicon-remove" type="button" data="TabRemove" ></button>
                        </td>
                    </tr>
                </table>
            </div>-->
 
        </form>
    </div>


<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" id="modal" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <form class="modal-content"> 
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" >...</h4>
        </div>
        <div class="modal-body">  </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">确定</button>
        </div>
    </form>
  </div>
</div>

</body>

</html>